<!DOCTYPE html>
<html>
<head>
    <style>
        .error { color: red; font-size: 0.9em; }
        input.invalid { border: 1px solid red; }
    </style>
</head>
<body>
    <form id="registerForm">
        <div>
            <label>用户名：</label>
            <input type="text" id="username" required>
            <span class="error" id="usernameError"></span>
        </div>
        
        <div>
            <label>邮箱：</label>
            <input type="email" id="email" required>
            <span class="error" id="emailError"></span>
        </div>

        <div>
            <label>密码：</label>
            <input type="password" id="password" required>
            <span class="error" id="passwordError"></span>
        </div>

        <button type="submit">注册</button>
    </form>

    <script>
        const form = document.getElementById('registerForm');
        const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

        // 实时验证函数
        function validateUsername() {
            const username = document.getElementById('username').value;
            if (username.length < 3) {
                showError('usernameError', '用户名至少需要3个字符');
                return false;
            }
            clearError('usernameError');
            return true;
        }

        function validateEmail() {
            const email = document.getElementById('email').value;
            if (!emailRegex.test(email)) {
                showError('emailError', '请输入有效的邮箱地址');
                return false;
            }
            clearError('emailError');
            return true;
        }

        function validatePassword() {
            const password = document.getElementById('password').value;
            if (password.length < 6) {
                showError('passwordError', '密码至少需要6个字符');
                return false;
            }
            clearError('passwordError');
            return true;
        }

        // 提交处理
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            
            const isUsernameValid = validateUsername();
            const isEmailValid = validateEmail();
            const isPasswordValid = validatePassword();

            if (isUsernameValid && isEmailValid && isPasswordValid) {
                // 提交表单逻辑
                alert('表单验证通过，正在提交...');
                form.submit();
            }
        });

        // 错误处理函数
        function showError(elementId, message) {
            const errorElement = document.getElementById(elementId);
            errorElement.textContent = message;
            errorElement.previousElementSibling.classList.add('invalid');
        }

        function clearError(elementId) {
            const errorElement = document.getElementById(elementId);
            errorElement.textContent = '';
            errorElement.previousElementSibling.classList.remove('invalid');
        }

        // 添加实时验证
        document.getElementById('username').addEventListener('input', validateUsername);
        document.getElementById('email').addEventListener('input', validateEmail);
        document.getElementById('password').addEventListener('input', validatePassword);
    </script>
</body>
</html>